<div id="main" data-view="samples/main">
<style type="text/css">
	#main td {
		width: 50%;
		height: 100px;
		text-align: center;
		padding: 2px 2px 2px 2px;
	}
	#main table {
		width: 100%;
		margin-top: 4px;
	}
	#main .sample {
		height: 96px;
  		line-height: 96px;
  		border-radius: 4px;
	}
</style>
<header class="bar bar-nav blue-bar">
    <h1 class="title" id = "tab-title">samples</h1>
</header>
<div class="content">
	<table>
		<tr>
			<td><div class="sample" data-path="samples/Animation/animation.html" style="background-color:lightblue">Animation</div></td>
			<td><div class="sample" data-path="samples/Navigate/pagea.html" style="background-color:lightblue">Navigate</div></td>
		</tr>
		<tr>
			<td><div class="sample" data-path="samples/CustomApp/customapp.html" style="background-color:lightpink">CustomApp</div></td>
			<td><div class="sample" data-path="samples/ExtendView/extendview.html" style="background-color:lightpink">ExtendView</div></td>
		</tr>
		<tr>
			<td><div class="sample" data-path="animation" style="background-color:lightgreen">Locale</div></td>
			<td><div class="sample" data-path="samples/Components/components.html" style="background-color:lightgreen">Components</div></td>
		</tr>
		<tr>
			<td><div class="sample" data-path="samples/Subview/subview.html" style="background-color:lightskyblue">Subview</div></td>
			<td><div class="sample" data-path="components/moduleManager/modulesManagePage.html" style="background-color:lightskyblue">Modules</div></td>
		</tr>
	</table>
</div>